<template>
    
    <div>
        <br />
        <myheader/>

        <div class="container">

          <div class="item_column">
              <div class="left">   
                  
              </div>

              <div class="right"> 
                  
                  <br />
                  <br />

                  <div>
                    <P v-for="i in paramslist" :key="i.id">
                        <van-field v-if="i.type == 'input'" :label="i.lable" type="datetime" v-model="values[i.lable]" class="tname"/>
                        <p v-if="i.type == 'select'">
                            <select  v-model="values[i.lable]">
                                <option :value="o.type" v-for="o in i.values" :key="o.id">{{o.name}}</option>
                            </select>
                        </p>
                        <van-uploader v-if="i.type == 'file'"/>
                        <el-date-picker v-if="i.type == 'datetime'"
                            v-model="value1"
                            type="datetimerange"
                            range-separator="To"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间"
                            value-format='YYYY-MM-DD HH:mm:ss'
                            >
                        </el-date-picker>
                    </P>
                    <van-button @click='getaudit'>选择审批人</van-button>
                    <el-dialog v-model="dialogTableVisible" title="Shipping address">
                        <el-tree
                        :data="data"
                        show-checkbox
                        node-key="id"
                        :props="defaultProps"
                        @check='getids'
                      /> 
                    </el-dialog>

                    <van-button @click="submit">提交</van-button>
                </div>
                  
              </div>
            </div>
        </div>
    </div>
</template>

<script>
import myheader from './myheader.vue'
import maxios from '../http/axios'
export default {

    components: {
        'myheader':myheader,
    },
    data() {
        return {
            wid:this.$route.query.id,
            workf:{},
            paramslist:[],
            value1:[],
            values:{},
            pic:'../assets/微信图片_20211215111401.png',
            checkdvalues:[],
            dialogTableVisible:false,
            data: [
                {
                id: 1,
                label: 'Level one 1',
                children: [
                    {
                    id: 4,
                    label: 'Level two 1-1',
                    children: [
                        {
                        id: 9,
                        label: 'Level three 1-1-1',
                        },
                        {
                        id: 10,
                        label: 'Level three 1-1-2',
                        },
                    ],
                    },
                ],
                },
                {
                id: 2,
                label: 'Level one 2',
                children: [
                    {
                    id: 5,
                    label: 'Level two 2-1',
                    },
                    {
                    id: 6,
                    label: 'Level two 2-2',
                    },
                ],
                },
                {
                id: 3,
                label: 'Level one 3',
                children: [
                    {
                    id: 7,
                    label: 'Level two 3-1',
                    },
                    {
                    id: 8,
                    label: 'Level two 3-2',
                    },
                ],
                },
            ],
            defaultProps: {
                children: 'children',
                label: 'username',
            
            },
        }
        
    },
    methods: {
        getwork(){
           maxios('/getworkf','get',{'id':this.wid}).then(res=>{
                this.workf = res.workf
                this.paramslist = JSON.parse(res.workf.params)

            })
        },
        

         getlabelByType(type){
            let label=''
            for(var i=0;i<this.paramslist.length;i++){
                if(this.paramslist[i]['type'] == type){
                    label = this.paramslist[i]['lable']
                }
            }
            return label
        },

        getaudit(){
            // 读取公司部门角色列表
            maxios('getcomanyuser','get').then(res=>{
                this.data = res.list

            })

            this.dialogTableVisible=true
        },

        getids(val1,status){
            this.checkdvalues=[]
            let list = status['checkedNodes']
            for(var i=0;i<list.length;i++){
                if(list[i]['type'] == 3){
                    this.checkdvalues.push(list[i]['id'])
                }
            }
            console.log(this.checkdvalues)
        },
        submit(){
            if(this.pic){
                let label = this.getlabelByType('file')
                this.values[label] = this.pic
            }
            if(this.value1.length>0){
                let stime = this.getlabelByType('datetime')
                this.values[stime] = this.value1[0]
                this.values['结束时间'] = this.value1[1]
            }
            console.log(this.values)
            // let title = this.workf.name
            // console.log(document.getElementsByClassName('tname')[0])
            // ['van-cell_title van-field_label']['label']

            // 获取第一个input框中的信息
            let name = document.getElementsByTagName('input')[0].value
            let title = this.workf['name']+name
            maxios('/taskm','post',{'title':title,'params':JSON.stringify(this.values),'auditids':this.checkdvalues}).then(res=>{
                console.log(res)

            })

        },

        
    },
    created() {
        this.getwork()
        
    }
}
</script>

<style scoped>

</style>
